<template>
  <div class="logbox">
    <header>
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <div>注册账号</div>
      <i></i>
    </header>
    <div class="login">
      <div class="input">
        <span>账号:</span>
        <input type="text" v-model="userinfo.username" />
      </div>
      <div class="input">
        <span>密码:</span>
        <input type="text" v-model="userinfo.password" />
      </div>
      <div class="btn" @click="reigist">
        注册
      </div>
    </div>
  </div>
</template>

<script>
import { getReigist, Reigist } from "../api/user";
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    reigist() {
      getReigist(this.userinfo.username).then((res) => {
        if (res.data.length) {
           this.$message.error('该账号已注册');
        } else {
          Reigist(this.userinfo).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.$router.push('/login')
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>

header{
  height: 20vh;
  width: 100%;
  overflow: hidden;
}
.el-icon-arrow-left{
  display: block;
  font-size: 30px;
  margin-top: 5vh;
  margin-left: 20px;
  width: 30px;;
  height: 30px;
  background-color: black;
  color: white;
  border-radius: 50%;

}
header div{
  width: 100%;
  text-align: center;
  line-height:15vh;
  font-size: 30px;
  font-weight: bolder;
}
.input{
  margin-left: 20px;
  margin-top: 20px;
}
.input input{
  margin-left: 30px;
  height: 4vh;
  background-color: teal;
  border-color: darkgreen;
  border-radius: 10px;
}
.btn{
  width: 250px;
  height: 7vh;
  background-color: orangered;
  text-align: center;
  line-height: 7vh;
  color: white;
  font-size: 15px;
  border-radius: 20px;
  margin-left: 40px;
  margin-top: 30px;
}
</style>
